import React from 'react';
import {createPortal} from 'react-dom';
import HelloWorld from "./HelloWorld";

import ThemeContext from "./context/theme-context";
import UserContext from "./context/user-context";
import Profile from "./Profile";
import Css from "./Css";
import store from "./store";
import {Count} from "./Count";
import About from "./About";
import Category from "./Category";
import Display from "./Display";
import './style.css';

export class App extends React.PureComponent {
    constructor(props) {
        super(props);
        console.log(store.getState())
        this.state = {
            count: store.getState().count.count,
            isShowChildren: true,
            text: 'hhh',
        }
        this.h1Ref = null;
    }

    componentDidMount() {
        store.subscribe(() => {
            this.setState({count: store.getState().count.count})
        })
    }

    toggleChildrenShow() {
        this.setState((prevState) => ({isShowChildren: !prevState.isShowChildren}))
    }

    addClick(num) {
        this.setState((prevState) => ({count: prevState.count + num}))
    }

    render() {
        const {isShowChildren, text, count} = this.state;
        const info = {text, addClick: (num) => this.addClick(num)}
        return (
            <div className="app">
                <div>
                    <h1 ref={(el) => this.h1Ref = el}>哈哈哈</h1>
                    <h2>{count}</h2>
                </div>
                {/*<UserContext.Provider value={{userName: 'zzz'}}>*/}
                {/*    <ThemeContext.Provider value={{color: 'red'}}>*/}
                {/*        {isShowChildren && <HelloWorld text={text} addClick={(num) => this.addClick(num)}/>}*/}
                {/*        {isShowChildren && <HelloWorld {...info}/>}*/}
                {/*    </ThemeContext.Provider>*/}
                {/*</UserContext.Provider>*/}
                {/*<Profile/>*/}
                {/*<button onClick={() => this.toggleChildrenShow()}>控制子组件显示</button>*/}
                {/*<Css/>*/}
                <Count/>
                <About/>
                <Category/>
                <Display/>
            </div>
        )
    }
}

export default App;